<template>
  <div class="container">
    <div class="header">
      <div class="header-title">供电安全生产信息</div>
      <div class="header-left">{{ userInfo.deptName }}</div>
      <div class="header-right">{{ time }}</div>
    </div>
    <div class="content">
      <div class="content-left">
        <div v-border.corner class="content-days">
          <div class="days-line">
            <span class="title-text">无责任铁路交通事故</span>
            <span class="days-value">{{ safetyDays }}</span>
            <span class="days-unit">天</span>
          </div>
          <div class="days-line">
            <span class="title-text">值班领导</span>
            <span v-if="leader.length<15" class="days-leader">{{ leader }}</span>
            <span v-else class="days-leader"><marqueeLeft :lists="[leader]" /></span>
          </div>
        </div>
        <div v-border.corner class="content-security-info">
          <div class="security-info-title title-text">发牌信息</div>
          <div ref="securityInfo" class="security-info-content">
            <template v-if="securityInfo.length">
              <el-scrollbar>
                <div v-for="(item, index) in securityInfo" :key="index" class="security-info-item">
                  <div class="security-info-item__title">
                    <span class="security-info-item__index">{{ index+1 }}</span>
                    <span class="security-info-item__address">{{ item.findDeptAttr ? (item.findDeptAttr.deptName || item.findDeptAttr.oldDeptName) + ' - ' : '' }}{{ item.findPersonAttr.name }}：</span>
                    <span class="security-info-item__status" :style="{background: item.isSolved === 'Y' ? '#2ea15c' : '#d89403'}">
                      {{ item.isSolved === 'Y' ? '已销号' : '未销号' }}
                    </span>
                  </div>
                  <div class="security-info-item__detail" :title="getSecurityInfoText(item)">
                    {{ getSecurityInfoText(item) }}
                  </div>
                </div>
              </el-scrollbar>
            </template>
            <template v-else>
              <div class="empty">暂无数据</div>
            </template>
          </div>
        </div>
        <div v-border.corner class="content-equipment-defect">
          <div class="equipment-defect-title title-text">最新发生设备缺陷</div>
          <div class="equipment-defect-table">
            <div class="equipment-defect-table-head">
              <div class="equipment-defect-table-td" style="width:70px;">时间</div>
              <div class="equipment-defect-table-td" style="flex: 1;">位置</div>
              <div class="equipment-defect-table-td" style="flex:1;">缺陷类型</div>
              <div class="equipment-defect-table-t " style="width:80px;">缺陷等级</div>
            </div>
            <div class="equipment-defect-table-body">
              <template v-if="equipmentDefect.length">
                <scroll
                  :data="equipmentDefect"
                  :class-option="{limitMoveNum: 6, step: 0.3}"
                  class="defect-seamless-scroll"
                  style="height:100%;overflow:hidden;">
                  <div
                    v-for="(item, index) in equipmentDefect"
                    :key="index"
                    class="equipment-defect-table-tr">
                    <div class="equipment-defect-table-td" style="width:70px;">{{ parseTime(item.date, '{m}月{d}') }}</div>
                    <div class="equipment-defect-table-td text_left" style="flex:1;line-height:22px;">{{ item.location }}</div>
                    <div class="equipment-defect-table-td" style="flex:1;line-height:22px;">{{ item.defectType }}</div>
                    <div class="equipment-defect-table-td" style="width: 80px;">
                      <span :style="{background: item.grade === '一级' ? '#f42929' : '#d89403'}">
                        {{ item.grade }}
                      </span>
                    </div>
                  </div>
                </scroll>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="content-right-top">
          <!-- <div v-border.corner class="content-key-work">
            <div class="key-work-title title-text"><span>重点工作</span></div>
            <div class="key-work-content">
              <template v-if="keyWork.length">
                <el-scrollbar>
                  <div
                    v-for="(item, index) in keyWork"
                    :key="index"
                    class="key-work-item"
                    :title="item.standard.replace(/[<p>|<p/>]/g, '')">
                    <span class="key-work-item__index">{{ index+1 }}</span>
                    <p class="key-work-item__text" v-html="item.standard.replace(/[<p>|<p/>]/g, '')" />
                  </div>
                </el-scrollbar>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </div>
          </div> -->
          <div class="content-trip content-trip-left">
            <div v-border.corner class="content-substation-trip">
              <div class="substation-trip-title">
                <span class="title-text">安全生产信息</span>
                <div class="substation-trip-subtitle" />
              </div>
              <div class="substation-trip-content">
                <scroll
                  :data="substationTripLeft.data"
                  :class-option="{limitMoveNum: 5, singleHeight: productionHeight, waitTime: 3000}"
                  class="substation-seamless-scroll"
                  style="height:100%;overflow:hidden;">
                  <div v-for="(item, index) in substationTripLeft.data" :key="index" class="substation-trip-item content-trip-left-scroll" @click="handleToPage('/pspc/daily-screen', item)">
                    <div v-if="item.type == 1 || item.type == 2" class="substation-trip-item__text" :title="item.showContent">
                      {{ item.showContent }}
                    </div>
                    <div v-if="item.type == 3" class="substation-trip-item__text">【其它情况】{{ item.content }}</div>
                  </div>
                </scroll>
              </div>
            </div>
          </div>
          <div class="content-trip">
            <div v-border.corner class="content-substation-trip">
              <div class="substation-trip-title">
                <span class="title-text">变电所、亭跳闸及电源停电情况</span>
                <div class="substation-trip-subtitle">
                  本月<span class="subtitle-value">{{ substationTrip.monthNum }}</span>起，累计<span class="subtitle-value">{{ substationTrip.todayNum }}</span>起
                </div>
              </div>
              <div class="substation-trip-content">
                <scroll
                  :data="substationTrip.data"
                  :class-option="{limitMoveNum: 2, singleHeight: tripHeight, waitTime: 3000}"
                  class="substation-seamless-scroll"
                  style="height:100%;overflow:hidden;">
                  <div v-for="(item, index) in substationTrip.data" :key="index" class="substation-trip-item trip-left-scroll">
                    <div class="substation-trip-item__text">
                      {{ `${parseTime(item.tripTime, '{m}月{d}日 {h}:{i}')} ${item.lineName || ''} ${item.bdsAttr ? item.bdsAttr.bdsName : ''}${item.switchFlag}开关${item.desc || '跳闸'} ${item.handleStatus === 1 ? parseTime(item.handleDate, '{h}:{i} 复合成功') : ''} 故障里程:${formatRoad(item.roadMark[0])}` }}
                    </div>
                    <span
                      class="substation-trip-item__status"
                      :style="{background: item.handleStatus === 1 ? '#2ea15c' : (item.handleStatus === 2 ? '#f42929' : '#1168a4')}">
                      {{ item.handleStatus == 1 ? '复合成功' : (item.handleStatus === 2 ? '已定责' : '处理中') }}
                    </span>
                  </div>
                </scroll>
              </div>
            </div>
            <div v-border.corner class="content-electricity-trip">
              <div class="electricity-trip-title">
                <span class="title-text">电力跳闸及电源停电情况</span>
                <div class="electricity-trip-subtitle">
                  本月<span class="subtitle-value">0</span>起，累计<span class="subtitle-value">3</span>起
                </div>
              </div>
              <div class="electricity-trip-content">
                <scroll
                  :data="electricityTrip"
                  :class-option="{limitMoveNum: 2, singleHeight: 70, waitTime: 3000}"
                  class="electricity-seamless-scroll"
                  style="height:100%;overflow:hidden;">
                  <div v-for="(item, index) in electricityTrip" :key="index" class="electricity-trip-item trip-left-scroll">
                    <div class="electricity-trip-item__text">{{ item.text }}</div>
                    <span
                      class="electricity-trip-item__status"
                      :style="{background: item.status ? '#2ea15c' : ''}">{{ item.status ? '复合成功' : '' }}</span>
                  </div>
                </scroll>
              </div>
            </div>
          </div>
        </div>
        <div v-border.corner class="content-maintenance">
          <div class="maintenance-title">
            <div
              :class="['maintenance-title-item', {active: maintenance.active == 1}]"
              @mouseenter="maintenance.active = 1">
              <div style="width:20px;">维修天窗情况</div>
            </div>
            <div
              :class="['maintenance-title-item', {active: maintenance.active == 2}]"
              @mouseenter="maintenance.active = 2">
              <div style="width:20px;">施工天窗情况</div>
            </div>
          </div>
          <div class="maintenance-statistics">
            <div class="maintenance-statistics-title">{{ computedMaintenance.time }}</div>
            <div class="maintenance-statistics-thead">
              <div class="maintenance-statistics-td" style="flex: 1;padding-left:10px;" />
              <div class="maintenance-statistics-td w60" style="color:#fff;">高铁</div>
              <div class="maintenance-statistics-td w60" style="color:#fff;">普铁</div>
              <div class="maintenance-statistics-td w50" />
            </div>
            <div class="maintenance-statistics-body">
              <div
                v-for="(item, index) in maintenance.statistics"
                :key="index"
                class="maintenance-statistics-tr">
                <div class="maintenance-statistics-td" style="flex: 1;padding-left:10px;">{{ item.name }}</div>
                <div class="maintenance-statistics-td w60">{{ computedMaintenance.count && computedMaintenance.count[0][item.highSpeed] }}</div>
                <div class="maintenance-statistics-td w60">{{ computedMaintenance.count && computedMaintenance.count[0][item.normalSpeed] }}</div>
                <div class="maintenance-statistics-td w50">{{ item.unit }}</div>
              </div>
            </div>
          </div>
          <div class="maintenance-detail">
            <div class="maintenance-detail-thead">
              <div class="maintenance-detail-td">线别</div>
              <div class="maintenance-detail-td">工区</div>
              <div class="maintenance-detail-td">作业项目</div>
              <div class="maintenance-detail-td">作业地点、内容及检修数量</div>
              <div class="maintenance-detail-td">作业组出动</div>
              <div class="maintenance-detail-td width_100">申请时间(分)</div>
              <div class="maintenance-detail-td width_100">行调给点(分)</div>
              <div class="maintenance-detail-td width_100">电调给点(分)</div>
              <div class="maintenance-detail-td width_100">检修时间(分)</div>
              <div class="maintenance-detail-td width_110">状态</div>
            </div>
            <div class="maintenance-detail-body">
              <template v-if="computedMaintenance.list && computedMaintenance.list.length">
                <scroll
                  :data="computedMaintenance.list"
                  :class-option="{limitMoveNum: 6, step: 0.2}"
                  class="maintenance-seamless-scroll"
                  style="height:100%;overflow:hidden;">
                  <div
                    v-for="(item, index) in computedMaintenance.list"
                    :key="index"
                    class="maintenance-detail-tr"
                    @click="maintenanceDetail(item)">
                    <div class="maintenance-detail-td text_align_left">{{ item.lineName }}</div>
                    <div class="maintenance-detail-td text_align_left">{{ item.deptName }}</div>
                    <div class="maintenance-detail-td text_align_left">
                      <div class="maintenance-detail-td-text" :title="item.workProject">{{ item.workProject }}</div>
                    </div>
                    <div class="maintenance-detail-td text_align_left">
                      <div class="maintenance-detail-td-text" :title="`${item.workAddress}${item.blockMileage}${item.workContent}`">
                        {{ `${item.workAddress}${item.blockMileage}${item.workContent}` }}
                      </div>
                    </div>
                    <div class="maintenance-detail-td text_align_left">
                      <div class="maintenance-detail-td-text" :title="`领导人:${item.workLeader || ''} 共计${item.staffNum}人`">
                        {{ `领导人:${item.workLeader || ''} 共计${item.staffNum}人` }}
                      </div>
                    </div>
                    <div class="maintenance-detail-td width_100">
                      {{ item.workTime.split('(')[0] + ' (' + item.workTime.split('(')[1] }}
                    </div>
                    <div class="maintenance-detail-td width_100">
                      {{ `${item.trainDispatchStartDate}-${item.trainDispatchEndDate} ${item.trainDispatchMinutes ? `(${item.trainDispatchMinutes}分钟)` : ''}` }}
                    </div>
                    <div class="maintenance-detail-td width_100">
                      {{ `${item.powerDispatchStartDate}-${item.powerDispatchEndDate} ${item.powerDispatchMinutes ? `(${item.powerDispatchMinutes}分钟)` : ''}` }}
                    </div>
                    <div class="maintenance-detail-td width_100">
                      {{ `${item.startWorkDate}-${item.endWorkDate} ${item.workMinutes ? `(${item.workMinutes}分钟)` : ''}` }}
                    </div>
                    <div class="maintenance-detail-td width_110">
                      <span :style="{background: item.flowNodeStatus === -1 ? '#2ea15c' : '#1168a4'}">
                        {{ item.flowNodeText }}
                      </span>
                    </div>
                  </div>
                </scroll>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </div>
          </div>
        </div>
        <div v-border.corner class="content-overhaul">
          <div class="overhaul-title title-text"><span>变配电及电力检修情况</span></div>
          <div class="overhaul-statistics">
            <div class="overhaul-substation">
              <div class="overhaul-substation__title">变配电</div>
              <div class="overhaul-high-speed">
                <span>高铁</span>
                <div class="overhaul-progress">
                  3
                  <div class="overhaul-progress__inner" style="width: 66%;">2</div>
                </div>
              </div>
              <div class="overhaul-normal-speed">
                <span>普铁</span>
                <div class="overhaul-progress">
                  3
                  <div class="overhaul-progress__inner" style="width: 66%;">2</div>
                </div>
              </div>
            </div>
            <div class="overhaul-electricity">
              <div class="overhaul-electricity__title">电力</div>
              <div class="overhaul-high-speed">
                <span>高铁</span>
                <div class="overhaul-progress">
                  3
                  <div class="overhaul-progress__inner" style="width: 66%;">2</div>
                </div>
              </div>
              <div class="overhaul-normal-speed">
                <span>普铁</span>
                <div class="overhaul-progress">
                  3
                  <div class="overhaul-progress__inner" style="width: 66%;">2</div>
                </div>
              </div>
            </div>
          </div>
          <div class="overhaul-detail">
            <div class="overhaul-detail-thead">
              <div class="overhaul-detail-td" style="width:85px;">线别</div>
              <div class="overhaul-detail-td" style="width:130px;">工区</div>
              <div class="overhaul-detail-td" style="width:80px;">作业时间</div>
              <div class="overhaul-detail-td" style="flex: 1;">作业地点、内容</div>
              <div class="overhaul-detail-td" style="width:160px;">作业人员</div>
              <div class="overhaul-detail-td" style="width:60px;">完成情况</div>
              <div class="overhaul-detail-td" style="width:90px;">状态</div>
            </div>
            <div class="overhaul-detail-body">
              <!-- <scroll
                :data="overhaul.detail"
                :class-option="{limitMoveNum: 3, step: 0.2}"
                class="overhaul-seamless-scroll"
                style="height:100%;overflow:hidden;"> -->
              <el-scrollbar>
                <div
                  v-for="(item, index) in overhaul.detail"
                  :key="index"
                  class="overhaul-detail-tr">
                  <div class="overhaul-detail-td text_align_left" style="width:85px;" :title="item.a">{{ item.a }}</div>
                  <div class="overhaul-detail-td text_align_left" style="width:130px;" :title="item.b">{{ item.b }}</div>
                  <div class="overhaul-detail-td text_align_left" style="width:80px;" :title="item.c">{{ item.c }}</div>
                  <div class="overhaul-detail-td text_align_left" style="flex: 1;" :title="item.d">{{ item.d }}</div>
                  <div class="overhaul-detail-td text_align_left" style="width:160px;" :title="item.e">{{ item.e }}</div>
                  <div class="overhaul-detail-td text_align_left" style="width:60px;" :title="item.f">{{ item.f }}</div>
                  <div class="overhaul-detail-td text_align_left" style="width:90px;">
                    <span :style="{background: item.g == 1 ? '#2ea15c' : '#1168a4'}">
                      {{ item.g == 1 ? '已完成' : '进行中' }}
                    </span>
                  </div>
                </div>
              </el-scrollbar>
              <!-- </scroll> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <transition name="gis-fade">
      <div v-if="nLink" class="nlink-container">
        <div class="nlink-shadow" @click="maintenanceDetail" />
        <div class="nlink">
          <button type="button" aria-label="Close" class="el-dialog__headerbtn gis-close-button">
            <i class="el-icon-close" @click="maintenanceDetail" />
          </button>
          <DataReview top="0px" :skylight-complete-flag="nLinkFlag" :plan-id="nLinkPlanId" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {
  getDaily,
  getRepairSkylight,
  getConstructionSkylight,
  getLeader
} from '@/api/gz-home/home'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import { getUserInfo } from '@/utils/auth'
import { formatRoad } from '@/utils/public'
import { getSafeDays } from '@/api/gz-home/dsc/system/safety-days'
import Socket from '@/utils/socket'
import Scroll from 'vue-seamless-scroll'
// import DataReview from 'pspc/src/views/pspc/construction/DataReview'
import marqueeLeft from '@/components/MarqueeLeft'
export default {
  name: 'PowerSupplyProduction',
  components: { Scroll,
    // DataReview,
    marqueeLeft },
  directives: {
    border: {
      inserted(el, binding) {
        el.style.cssText = 'border: 2px solid #152e55; border-radius: 9px;background: rgba(21, 46, 85, 0.3);'

        if (!binding.modifiers.corner) return
        const position = window.getComputedStyle(el).position
        if (!position || position === 'static') {
          el.style.position = 'relative'
        }

        const img = require('../../../../assets/images/jjxt/gz-home/home-block-corner.png')
        const ltCorner = document.createElement('img')
        ltCorner.src = img
        ltCorner.style.cssText = `position: absolute; left: -2px; top: -2px;`
        el.appendChild(ltCorner)

        const rtCorner = document.createElement('img')
        rtCorner.src = img
        rtCorner.style.cssText = `position: absolute; right: -2px; top: -2px; transform: rotate(90deg);`
        el.appendChild(rtCorner)

        const rbCorner = document.createElement('img')
        rbCorner.src = img
        rbCorner.style.cssText = `position: absolute; right: -2px; bottom: -2px; transform: rotate(180deg);`
        el.appendChild(rbCorner)

        const lbCorner = document.createElement('img')
        lbCorner.src = img
        lbCorner.style.cssText = `position: absolute; left: -2px; bottom: -2px; transform: rotate(-90deg);`
        el.appendChild(lbCorner)
      }
    }
  },
  data() {
    return {
      tripHeight: 70,
      productionHeight: 50,
      leader: '',
      zoom: document.body.clientWidth / 1920,
      time: '00-00-00 00:00:00',
      safetyDays: 0,
      securityInfo: [],
      equipmentDefect: [],
      keyWork: [],
      substationTrip: {},
      substationTripLeft: {},
      electricityTrip: [
        {
          text: '9月16日15:08 [雷雨广珠城际线金唐变电所211开关跳闸 15:08复合成功     故障里程: K95+459',
          status: 12
        }
      ],
      maintenance: {
        active: 1,
        statistics: [
          { name: '天窗申请', highSpeed: 'gtTotal', normalSpeed: 'ptTotal', unit: '个' },
          { name: '批复', highSpeed: 'gtPifu', normalSpeed: 'ptPifu', unit: '个' },
          { name: '给点', highSpeed: 'gtGeidian', normalSpeed: 'ptGeidian', unit: '个' },
          { name: '申请时间', highSpeed: 'gtApplyTime', normalSpeed: 'ptApplyTime', unit: '分钟' },
          { name: '行调给点', highSpeed: 'gtXingdiao', normalSpeed: 'ptXingdiao', unit: '分钟' },
          { name: '检修时间', highSpeed: 'gtWorkMinutes', normalSpeed: 'ptWorkMinutes', unit: '分钟' }
        ],
        repair: [],
        construction: []
      },
      overhaul: {
        detail: [
          { a: '深湛线', b: '湛江西车间', c: '08:00-18:00', d: '塘口变电所室外102DL、2LH、2B、2#系统门型架绝缘子设备清扫保养', e: '王飞旋、马付龙、梁锋、闵文、陈希剑、孙永琦、跟班干部：张秋、汽车司机：叶立雄', f: '已完成', g: '1' },
          { a: '京广高速', b: '韶关高铁供电工区', c: '08:00-13:20', d: '完成袁屋AT分区所、白土AT所设备巡视、设备运行正常，防小动物措施良好，集中接地回流测量', e: '丁亦凡、温贵才', f: '已完成', g: '1' },
          { a: '京广高速', b: '广州北高铁供电工区', c: '08:00-18:00', d: '茶屋分区所、黄金布AT所设备巡视(栏栅外作业）：(1）检查所内高低压设备行状态正常；（2）检查所内防小动物措施情况良好；（3）巡视所内消防、综治情况良好；（4）检查所内接触网开关控制站运行良好。存在问题：无。', e: '刘勇拓、吴国锋、丁闯', f: '进行中', g: '0' },
          { a: '京广高速', b: '韶关高铁供电工区', c: '9:00-6:40', d: '配合大瑶山3#隧道24#、2#、3#洞室更换RTU设备及D箱K箱中损坏元件，检查光缆通道、直流对线校线', e: '邓有亨 张润忠 戴秋成', f: '已完成', g: '1' },
          { a: '广佛肇城际', b: '佛山西供电工区', c: '23:00-3:00', d: '对韩村变电所2#主变压器检修试验，铁芯绝缘遥测，取油样及油枕与油箱连接油管法兰处渗油处理', e: '朱明君、谭朝晖、朱仲华、卓越', f: '已完成', g: '1' },
          { a: '京广线', b: '广州北供电工区', c: '02:30-09:30', d: '执行重要任务对老唐屋、大石古、新花都变电所，英德西、清远、新花都配电所进行加强值班', e: '吴金权、丁闯、刘志杰、孙万兴、吴国锋、薛冠超、李永涛、钟建雄、刘勇拓、尹浩', f: '已完成', g: '1' },
          { a: '京广高速', b: '广州北高铁供电工区', c: '09:30-17:40', d: '老唐屋变电所、军田AT所、岭牌分区所、水背坑AT所设备巡视(栏栅外作业）：(1）检查所内高低压设备行状态正常；（2）检查所内防小动物措施情况良好；（3）巡视所内消防、综治情况良好；（4）检查所内接触网开关控制站运行良好；（5）回流检查正常', e: '刘勇拓、吴国锋、丁闯', f: '进行中', g: '0' },
          { a: '南广铁路', b: '肇庆东供电工区', c: '08:30-13:25', d: '广宁变电所、连石AT所所亭设备巡视及设备线夹测温。所亭设备运行正常。线夹测温情况良好', e: '钟涛、丁聪、马雪健、邹宇、李贵才、陈梓豪、张卫忠', f: '已完成', g: '1' },
          { a: '南广铁路', b: '佛山西高铁供电工区', c: '09:00-12:00', d: '对三水分区所设备巡视，防小动物措施封堵检查', e: '闵加强、卓越', f: '已完成', g: '1' },
          { a: '京广高速', b: '韶关高铁供电工区', c: '08:00-11:59', d: '完成新乐昌变电所设备巡视、设备运行正常，防小动物措施良好', e: '丁亦凡、邓有亨', f: '已完成', g: '1' }
        ]
        // detail: new Array(5).fill({}).map((item, index) => ({
        //   a: '京广高速',
        //   b: '韶关高铁接触网工区',
        //   c: '23:20-04:00',
        //   d: '珠海配电所、分区所设备巡视，珠海东西端低压所配合联创检查开关箱',
        //   e: '甘国权、周良涛',
        //   f: '240',
        //   g: index % 2
        // }))
      },
      parseTime: parseTime,
      formatRoad: formatRoad,
      nLink: false,
      nLinkFlag: -1,
      nLinkPlanId: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    computedMaintenance() {
      return this.maintenance.active === 1 ? this.maintenance.repair : this.maintenance.construction
    }
  },
  created() {
    this.initSocket()
    this.getSafeDays()
    this.getDaily()
    this.getLeader()
    // this.getRepairSkylight()
    // this.getConstructionSkylight()
    window.requestAnimationFrame(this.getTime)
  },
  beforeDestroy() {
    this.socket.ws.close()
    this.socket1.ws.close()
  },
  methods: {
    // 跳转缺陷页
    handleToPage(url, param) {
      if (param) {
        var startTime = param.startTime.substring(0, 10)
        var endTime = param.endTime.substring(0, 10)
        var pageUrl = url + '?startTime=' + startTime + '&endTime=' + endTime + '&id=' + param.id
        window.open(pageUrl)
      } else {
        window.open(url)
      }
    },
    getLeader() {
      getLeader().then((response) => {
        if (response.data) {
          this.leader = response.data
        } else if (response.message) {
          this.leader = response.message
        }
      })
    },
    // 维修天窗
    getRepairSkylight() {
      getRepairSkylight().then(response => {
        this.maintenance.repair = Object.freeze(response.data)
      })
    },
    // 施工天窗
    getConstructionSkylight() {
      getConstructionSkylight().then(response => {
        this.maintenance.construction = Object.freeze(response.data)
      })
    },
    getDaily() {
      getDaily().then((response) => {
        // eslint-disable-next-line no-unused-vars
        var showContent = ''
        for (var i in response.data) {
          if (response.data[i].type !== 3) {
            var type = ''
            if (response.data[i].type === 1) {
              type = '【变电跳闸】'
            } else if (response.data[i].type === 2) {
              type = '【电力跳闸】'
            }
            var tripTime = ''
            if (response.data[i].content.tripTime) {
              tripTime = response.data[i].content.tripTime + '，'
            }
            var bdsAction = ''
            if (response.data[i].content.bdsAttr) {
              bdsAction = response.data[i].content.bdsAttr.bdsName + '，'
            }
            var wTypeName = ''
            if (response.data[i].content.weatherTypeAttr.wTypeName) {
              wTypeName = '天气：' + response.data[i].content.weatherTypeAttr.wTypeName + '；'
            }
            var influenceTrain = ''
            if (response.data[i].content.influenceTrain) {
              influenceTrain = '影响范围：' + response.data[i].content.influenceTrain + '。'
            }
            var protectTypeFullNamet = ''
            if (response.data[i].content.protectTypeAttr.protectTypeFullName) {
              shortCurrent = response.data[i].content.protectTypeAttr.protectTypeFullNamet
            }
            var shortCurrent = ''
            if (response.data[i].content.shortCurrent) {
              shortCurrent = '电流：' + response.data[i].content.shortCurrent + 'A，'
            }
            var shortVoltage = ''
            if (response.data[i].content.shortVoltage) {
              shortVoltage = '电压：' + response.data[i].content.shortVoltage + 'kv,'
            }
            var impedance = ''
            if (response.data[i].content.impedance) {
              impedance = '阻抗值：' + response.data[i].content.impedance + 'Ω，'
            }
            var impedanceAngle = ''
            if (response.data[i].content.impedanceAngle) {
              impedanceAngle = '阻抗角' + response.data[i].content.impedanceAngle + '°；'
            }
            var bidForRoadMark = ''
            if (response.data[i].content.bidForRoadMark) {
              bidForRoadMark = '故测距离：' + response.data[i].content.bidForRoadMark + 'km'
            }
            response.data[i].showContent = type + tripTime + bdsAction + wTypeName + influenceTrain + protectTypeFullNamet + shortCurrent + shortVoltage + impedance + impedanceAngle + bidForRoadMark
          }
        }
        this.substationTripLeft = response
        this.$nextTick(() => {
          this.productionHeight = document.getElementsByClassName('content-trip-left-scroll')[0].clientHeight
        })
      })
    },
    initSocket() {
      this.socket = new Socket()
      this.socket.open()

      this.socket.addEventListener('onopen', _ => {
        this.socket.sendMessage('PAGE_PRODUCE')
      })
      this.socket.addEventListener('PAGE_PRODUCE', data => {
        console.log(data)
        switch (data.key) {
          case 'MANAGEMENT':
            this.securityInfo = Object.freeze(data.datas)
            break
          case 'DEFECT_INFO_TODAY':
            this.equipmentDefect = Object.freeze(data.datas)
            break
          case 'KEYWORK':
            this.keyWork = Object.freeze(data.datas)
            break
          case 'TRIP_INFO_TODAY':
            this.substationTrip = Object.freeze(data.datas)
            this.$nextTick(() => {
              this.tripHeight = document.getElementsByClassName('trip-left-scroll')[0].clientHeight
            })
            break
        }
      })

      var userInfo = getUserInfo()
      var replaceName = 'pspcgz' // 非六个段取值 pspcgz
      var pspcDeploy = ['gz', 'sz', 'cs', 'hk', 'hy', 'hh'] // pspc 目前部署单位
      if (userInfo && (pspcDeploy.indexOf(userInfo.abbreviation) !== -1)) {
        replaceName = 'pspc' + userInfo.abbreviation // 获取当前登录人所在单位标识abbreviation
      }
      this.socket1 = new Socket(replaceName)
      // this.socket1 = new Socket('pspc')
      this.socket1.open()

      this.socket1.addEventListener('onopen', _ => {
        this.socket1.sendMessage('PAGE_PRODUCE')
      })
      this.socket1.addEventListener('PAGE_PRODUCE', data => {
        console.log(data)
        switch (data.key) {
          case 'REPAIR_SKYLIGHT':
            this.maintenance.repair = Object.freeze(data.datas)
            break
          case 'WORK_SKYLIGHT':
            this.maintenance.construction = Object.freeze(data.datas)
            break
        }
      })
    },
    getSafeDays() {
      getSafeDays().then(response => {
        this.safetyDays = response.data.days || 0
      })
    },
    getTime() {
      this.time = parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s}')
      window.requestAnimationFrame(this.getTime)
    },
    getSecurityInfoText(item) {
      let notice = ''
      const noticeType = item.noticeTypeAttr.noticeTypeId
      const problemType = item.problemTypeAttr.wtType
      if (noticeType === 2) {
        notice = '红线'
      } else if (noticeType === 5) {
        notice = '安全监察通知书'
      } else if (noticeType === 6) {
        notice = '安全监察指令书'
      } else if (noticeType === 3) {
        switch (problemType) {
          case 1:
            notice = '严重失职牌'
            break
          case 2:
            notice = '一般失职牌'
            break
          case 3:
            notice = '轻微失职牌'
            break
        }
      } else if (noticeType === 4) {
        switch (problemType) {
          case 1:
            notice = 'A牌'
            break
          case 2:
            notice = 'B牌'
            break
          case 3:
            notice = 'C牌'
            break
        }
      }
      return `【${notice}】 ${parseTime(item.findDt, '{m}月{d}日 {h}:{i}')} ${item.problemContent || ''}`
    },
    maintenanceDetail(item) {
      // if (this.maintenance.active === 1) {
      //   window.open('pspc/data-playback?planId=' + item.dayPlanId + '&completeFlag=' + item.completeFlag)
      // }
      if (this.nLink) this.nLink = false
      else {
        this.nLink = true
        this.nLinkFlag = item.completeFlag
        this.nLinkPlanId = item.dayPlanId
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  $border-color: rgba(14, 47, 248, 0.4);
  .container{
    height: 100%;
    background: #0d1229 url(../../../../assets/images/jjxt/gz-home/big-screen-bg.png) no-repeat center/100% 100%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #fff;
    .header{
      height: 66px;
      background: url(../../../../assets/images/jjxt/gz-home/power-supply-header.png) no-repeat center bottom;
      position: relative;
      .header-title{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 34px;
        font-weight: bold;
      }
      .header-left,
      .header-right{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: bold;
        color: #5fbdfd;
      }
      .header-left{
        left: 20px;
      }
      .header-right{
        right: 20px;
      }
    }
    .content{
      padding: 10px;
      flex: 1;
      height: 0;
      display: flex;
      .el-scrollbar{
        height: 100%;
        /deep/.el-scrollbar__wrap{
          overflow-x: hidden;
        }
      }
      .title-text{
        font-size: 20px;
        font-weight: bold;
      }
      .empty{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        font-weight: bold;
        color: #394961;
      }
      .content-left{
        width: 400px;
        display: flex;
        flex-direction: column;
        .content-days{
          height: 100px;
          padding: 10px 15px;
          .days-line{
            height: 40px;
            display: flex;
            align-items: center;
            .days-value{
              flex: 1;
              padding-right: 10px;
              text-align: right;
              font-size: 30px;
              font-weight: bold;
              color: #2ea15c;
            }
            .days-unit{
              color: #5fbdfd;
            }
            .days-leader{
              flex: 1;
              margin-left: 20px;
              font-size: 16px;
              text-align: right;
              overflow: hidden;
            }
          }
        }
        .content-security-info{
          flex: 1;
          height: 0;
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          .security-info-title{
            padding: 10px 15px;
          }
          .security-info-content{
            flex: 1;
            height: 0;
            position: relative;
            .security-info-item{
              margin: 0 15px;
              padding: 10px 0;
              border-bottom: 1px dashed $border-color;
              .security-info-item__title{
                display: flex;
                align-items: center;
                .security-info-item__index{
                  display: inline-block;
                  width: 25px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  border-radius: 4px;
                  background: #1168a4;
                  font-size: 14px;
                }
                .security-info-item__address{
                  flex: 1;
                  width: 0;
                  padding: 0 10px;
                  font-size: 16px;
                }
                .security-info-item__status{
                  display: inline-block;
                  width: 70px;
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                  border-radius: 4px;
                  font-size: 14px;
                }
              }
              .security-info-item__detail{
                padding-left: 40px;
                margin-top: 10px;
                line-height: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
        .content-equipment-defect{
          flex: 1;
          height: 0;
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          .equipment-defect-title{
            padding: 10px 15px;
          }
          .equipment-defect-table{
            flex: 1;
            height: 0;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
          }
          .equipment-defect-table-head{
            height: 40px;
            border-bottom: 1px solid $border-color;
            display: flex;
            align-items: center;
            color: #5fbdfd;
          }
          .equipment-defect-table-body{
            flex: 1;
            height: 0;
          }
          .equipment-defect-table-tr{
            border-bottom: 1px dashed $border-color;
            display: flex;
            align-items: center;
          }
          .text_left.equipment-defect-table-td {
            text-align: left;
          }
          .equipment-defect-table-td{
            text-align: center;
            padding: 5px;
            span{
              display: inline-block;
              width: 70px;
              height: 25px;
              line-height: 25px;
              border-radius: 4px;
              font-size: 14px;
            }
          }
        }
      }
      .content-right{
        flex: 1;
        width: 0;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .content-right-top{
          height: 260px;
          display: flex;
          .content-key-work{
            flex: 3;
            width: 0;
            padding: 5px;
            display: flex;
            .key-work-title{
              width: 50px;
              position: relative;
              span{
                position: absolute;
                width: 20px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
            .key-work-content{
              flex: 1;
              width: 0;
              margin-left: 5px;
              position: relative;
              .key-work-item{
                height: 40px;
                line-height: 40px;
                border-bottom: 1px dashed $border-color;
                display: flex;
                align-items: center;
                .key-work-item__index{
                  display: inline-block;
                  width: 25px;
                  height: 20px;
                  line-height: 20px;
                  border-radius: 3px;
                  background: #1168a4;
                  margin: 0 3px;
                  font-size: 12px;
                  text-align: center;
                }
                .key-work-item__text{
                  flex: 1;
                  margin-left: 10px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .content-trip{
            flex: 2;
            width: 0;
            margin-left: 10px;
            .content-substation-trip{
              height: 125px;
              padding: 0 15px;
              display: flex;
              flex-direction: column;
              .substation-trip-title{
                height: 50px;
                border-bottom: 1px dashed $border-color;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .substation-trip-subtitle{
                  color: #5fbdfd;
                  .subtitle-value{
                    font-size: 20px;
                    font-weight: bold;
                    color: #f42929;
                    padding: 0 5px;
                  }
                }
              }
              .substation-trip-content{
                flex: 1;
                height: 0;
              }
              .substation-trip-item{
                height: 70px;
                display: flex;
                align-items: center;
                .substation-trip-item__text{
                  flex: 1;
                  width: 0;
                  color: #f42929;
                  line-height: 25px;
                  margin-right: 20px;
                }
                .substation-trip-item__status{
                  display: inline-block;
                  width: 90px;
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                  border-radius: 4px;
                  font-size: 14px;
                }
              }
            }
            .content-electricity-trip{
              height: 125px;
              margin-top: 10px;
              padding: 0 15px;
              display: flex;
              flex-direction: column;
              .electricity-trip-title{
                height: 50px;
                border-bottom: 1px dashed $border-color;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .electricity-trip-subtitle{
                  color: #5fbdfd;
                  .subtitle-value{
                    font-size: 20px;
                    font-weight: bold;
                    color: #f42929;
                    padding: 0 5px;
                  }
                }
              }
              .electricity-trip-content{
                flex: 1;
                height: 0;
              }
              .electricity-trip-item{
                height: 70px;
                display: flex;
                align-items: center;
                .electricity-trip-item__text{
                  flex: 1;
                  width: 0;
                  color: #f42929;
                  line-height: 25px;
                  margin-right: 20px;
                }
                .electricity-trip-item__status{
                  display: inline-block;
                  width: 90px;
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                  border-radius: 4px;
                  font-size: 14px;
                }
              }
            }
          }
          .content-trip-left{
            flex: 2;
            width: 0;
            margin-left: 0px;
            .title-text{
              font-size: 20px;
              font-weight: bold;
            }
            .content-substation-trip{
              height: 260px;
              padding: 0 15px;
              display: flex;
              flex-direction: column;
              .substation-trip-title{
                height: 50px;
                border-bottom: 1px dashed $border-color;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .substation-trip-subtitle{
                  color: #5fbdfd;
                  .subtitle-value{
                    font-size: 20px;
                    font-weight: bold;
                    color: #f42929;
                    padding: 0 5px;
                  }
                }
              }
              .substation-trip-content{
                flex: 1;
                height: 0;
              }
              .substation-trip-item{
                width: 100%;
                height: 50px;
                .substation-trip-item__text{
                  cursor: pointer;
                  color: #ffffff;
                  line-height: 50px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  border-bottom: 1px dashed $border-color;
                  &:hover {
                    color: #5fbdfd;
                  }
                }
                .substation-trip-item__status{
                  display: inline-block;
                  width: 90px;
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                  border-radius: 4px;
                  font-size: 14px;
                }
              }
            }
          }
        }
        .content-maintenance{
          flex: 1;
          height: 0;
          margin-top: 10px;
          padding: 5px;
          display: flex;
          .maintenance-title{
            width: 50px;
            .maintenance-title-item{
              height: 50%;
              border-radius: 9px 0 0 9px;
              color: #727982;
              font-size: 20px;
              font-weight: bold;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              &.active{
                background: #1a284a;
                color: #fff;
              }
            }
          }
          .maintenance-statistics{
            width: 270px;
            background: #1a284a;
            border-radius: 0 9px 9px 0;
            padding: 0 5px;
            display: flex;
            flex-direction: column;
            &-title{
              padding-top: 10px;
              text-align: center;
            }
            &-thead{
              height: 45px;
              font-weight: bold;
              border-bottom: 1px solid $border-color;
              display: flex;
              align-items: center;
            }
            &-td{
              white-space: nowrap;
              &.w50{
                width: 50px;
                color: #6fa4de;
                text-align: center;
              }
              &.w60{
                width: 60px;
                color: #f8bb00;
                font-weight: bold;
                text-align: center;
              }
            }
            &-body{
              flex: 1;
              height: 0;
              display: flex;
              flex-direction: column;
              .maintenance-statistics-tr{
                flex: 1;
                border-bottom: 1px dashed $border-color;
                display: flex;
                align-items: center;
                &:last-child{
                  border: 0;
                }
              }
            }
          }
          .maintenance-detail{
            flex: 1;
            width: 0;
            margin-left: 7px;
            display: flex;
            flex-direction: column;
            .maintenance-detail-thead{
              height: 45px;
              color: #5fbdfd;
              border-bottom: 1px solid $border-color;
              display: flex;
              align-items: center;
            }
            .maintenance-detail-td.text_align_left {
              text-align: left;
            }
            .maintenance-detail-td{
              flex: 1;
              text-align: center;
              padding: 15px 5px;
              line-height: 24px;
              .maintenance-detail-td-text{
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              span{
                display: inline-block;
                height: 25px;
                line-height: 25px;
                padding: 0px 6px;
                text-align: center;
                border-radius: 4px;
                font-size: 14px;
              }
            }
            .width_110 {
              flex: unset;
              width: 110px;
            }
            .width_100 {
              flex: unset;
              width: 100px;
            }
            .maintenance-detail-body{
              flex: 1;
              height: 0;
              position: relative;
              .maintenance-detail-tr{
                border-bottom: 1px dashed $border-color;
                cursor: pointer;
                display: flex;
                align-items: center;
                // &:last-child{
                //   border: 0;
                // }
              }
            }
          }
        }
        .content-overhaul{
          flex: 1;
          height: 0;
          margin-top: 10px;
          padding: 5px;
          display: flex;
          .overhaul-title{
            width: 50px;
            position: relative;
            span{
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 20px;
            }
          }
          .overhaul-statistics{
            width: 270px;
            background: #1a284a;
            border-radius: 9px;
            padding: 0 15px;
            .overhaul-electricity{
              margin-top: 15px;
            }
            .overhaul-substation__title,
            .overhaul-electricity__title{
              height: 45px;
              line-height: 45px;
              font-weight: bold;
              border-bottom: 1px solid $border-color;
            }
            .overhaul-high-speed,
            .overhaul-normal-speed{
              display: flex;
              align-items: center;
              margin-top: 15px;
              > span{
                color: #5fbdfd;
                margin-right: 10px;
              }
              .overhaul-progress{
                flex: 1;
                width: 0;
                height: 26px;
                line-height: 26px;
                border-radius: 4px;
                background: #fff;
                text-align: right;
                padding-right: 15px;
                position: relative;
                color: #000;
                .overhaul-progress__inner{
                  position: absolute;
                  left: 0;
                  top: 0;
                  height: 100%;
                  background: #2ea15c;
                  border-radius: 4px;
                  padding-left: 15px;
                  text-align: left;
                  color: #fff;
                }
              }
            }
          }
          .overhaul-detail{
            flex: 1;
            width: 0;
            margin-left: 7px;
            display: flex;
            flex-direction: column;
            .overhaul-detail-thead{
              height: 45px;
              color: #5fbdfd;
              border-bottom: 1px solid $border-color;
              display: flex;
              align-items: center;
            }
            .overhaul-detail-td{
              text-align: center;
              line-height: 24px;
              margin-right: 10px;
              &:first-of-type{
                padding-left: 10px;
              }
              &:last-of-type{
                margin-right: 0px;
              }
              span{
                display: inline-block;
                width: 80px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                border-radius: 4px;
                font-size: 14px;
              }
            }
            .text_align_left_left {
              text-align: left;
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .overhaul-detail-body{
              flex: 1;
              height: 0;
              .overhaul-detail-tr{
                padding: 6px 0;
                border-bottom: 1px dashed $border-color;
                display: flex;
                align-items: center;
                &:last-child{
                  border: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  .nlink {
    width: 96%;
    height: 92%;
    position: absolute;
    background-color: #081934;
    top: 4%;
    left: 2%;
    border: 2px solid #022954;
    border-radius: 2px;
    z-index: 1;
  }
  .nlink-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
  }
  .nlink-container {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .gis-fade-enter,
  .gis-fade-leave-to {
    opacity: 0;
  }
  .gis-fade-enter-active,
  .gis-fade-leave-active {
    transition: opacity 0.5s;
  }
  .gis-close-button {
    z-index: 1;
    top: 1px;
    right: 3px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    border: 2px solid white;
    border-radius: 5px;
  }
  .gis-close-button i {
    color: white;
  }
</style>
